<template>
  <div
    class="my-image"
    :class="{ transition }"
    :style="style"
    @click="$emit('click')"
  >
    <img
      ref="image"
      class="img loading"
      src="./images/lazy.png"
      :class="{ fix }"
      :data-src="src"
      :style="{ ...style, objectFit: mode }"
    />
    <div class="fix-content" v-if="$slots.default">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import useLazy from "@/use/use-lazy";

export default {
  name: "my-image",
  props: {
    src: {
      type: String,
      default: "",
    },
    width: {
      type: [Number, String],
      default: 0,
    },
    height: {
      type: [Number, String],
      default: 0,
    },
    transition: {
      type: Boolean,
      default: false,
    },
    mode: {
      type: String,
      default: "cover",
    },
    fix: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const { image } = useLazy(props);

    return {
      image,
    };
  },
  computed: {
    style() {
      const style = {};
      const { height, width } = this;
      if (height)
        style.height = Number.isInteger(height) ? `${height}px` : height;
      if (width) style.width = Number.isInteger(width) ? `${width}px` : width;
      return style;
    },
  },
};
</script>

<style lang="less">
&.transition:hover {
  .my-image .img {
    transform: scale3d(1.05, 1.05, 1);
  }
}
</style>

<style lang='less' scoped>
.my-image {
  position: relative;
  overflow: hidden;
  &.transition:hover {
    .img {
      transform: scale3d(1.05, 1.05, 1);
      &.fix {
        transform: scale3d(1.05, 1.05, 1);
      }
    }
  }
  .img {
    width: 100%;
    display: block;
    transition: 1s;
    transform: scale3d(1.008, 1.008, 1.008);
    &.fix {
      transform: scale3d(1, 1, 1);
    }
    &.loading {
      background-color: #141515 !important;
      object-fit: contain !important;
    }
  }
  .fix-content {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
  }
}
</style>
